<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../libs/build/three.js"></script>
  <script src="../libs/js/controls/OrbitControls.js"></script>
</head>
<style>
  body {
    margin: 0;
    overflow: hidden;
  }
</style>

<body>
  <div id="webgl-output"></div>
  <script>
    function init() {
      // 创建场景
      var scene = new THREE.Scene();
      // 设置摄像机
      var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000)
      // 创建渲染器
      var renderer = new THREE.WebGLRenderer();
      // 设置渲染器的初始颜色
      renderer.setClearColor(new THREE.Color(0xeeeeee));
      // 设置输出canvas画面的大小
      renderer.setSize(window.innerWidth, window.innerHeight)
      // 设置渲染物体阴影
      renderer.shadowMap.enabled = true;

      // 显示三维坐标系
      var axes = new THREE.AxisHelper(20)


      // 添加坐标系到场景中
      scene.add(axes);
      // 创建地面的几何体
      var planeGeometry = new THREE.PlaneGeometry(60, 20);
      // 给地面物体上色
      var planeMaterial = new THREE.MeshPhysicalMaterial({ color: 0xcccccc });
      // 创建地面
      var plane = new THREE.Mesh(planeGeometry, planeMaterial)
      // 物体移动位置
      // plane.rotation.x = -0.5 * Math.PI;
      // plane.position.x = 15;
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.x = 0;
      plane.position.y = 0;
      plane.position.z = 0;
      // 地面阴影
      plane.castShadow = true;
      // 接收阴影
      plane.receiveShadow = true;
      // 将地面添加到场景中
      scene.add(plane);
      // 添加立方体
      var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
      var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 })
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

      cube.position.x = 0;
      cube.position.y = 4;
      cube.position.z = 0;
      // 对象是否渲染到阴影贴图当中
      cube.castShadow = true;
      scene.add(cube);

      // 球体
      var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
      var spherMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
      var sphere = new THREE.Mesh(sphereGeometry, spherMaterial)
      sphere.position.x = 10;
      sphere.position.y = 4;
      sphere.position.z = 0;
      // 对象是否渲染到阴影贴图当中
      sphere.castShadow = true;

      scene.add(sphere)

      // 光源
      var spotLight = new THREE.SpotLight(0xffffff)
      spotLight.position.set(130, 130, -130)
      // 阴影
      // 阴影扩散范围
      spotLight.angle = Math.PI / 20
      // 照射面光影衰减百分比-penumbra
      spotLight.shadow.penumbra = 0.05
      spotLight.shadow.mapSize.width = 1024
      spotLight.shadow.mapSize.innerHeight = 1024
      spotLight.castShadow = true
      scene.add(spotLight);

      // 

      // 定位相机，并且指向场景中心
      camera.position.x = 30;
      camera.position.y = 30;
      camera.position.z = 30;
      camera.lookAt(scene.position)

      // 将渲染器输出添加html元素中
      document.getElementById('webgl-output').appendChild(renderer.domElement);
      renderer.render(scene, camera)
      let T0 = new Date()
      function render() {
        let T1 = new Date()
        let t = T1 - T0;
        T0 = T1;
        renderer.render(scene, camera)
        // 每次绕y轴旋转0.01弧度
        // 每一毫秒渲染0.001弧度
        cube.rotateY(0.001 * t)
        sphere.rotateY(0.001 * t)
        window.requestAnimationFrame(render)
      }

      // setInterval(render, 16)
      window.requestAnimationFrame(render)
      var controls = new THREE.OrbitControls(camera, renderer.domElement)
      controls.addEventListener('change', () => {
        renderer.render(scene, camera)
      })
    }
    window.onload = init
  </script>
</body>

</html>